<template>
  <div class="search">
    <div class="heads">
      <div class="fh" @click="$router.push({path:'/Home'})">
        <span class="iconfont icon-arrow-left-bold"></span> 返回
      </div>
      <div class="center">搜索结果</div>
      <div class="shuJ"><span class="iconfont icon-shujia"></span> 主页</div>
    </div>
    <div class="search-box">
      <van-search
        v-model="value"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
      >
        <template #action>
          <div @click="onSearch">搜索</div>
        </template>
      </van-search>
    </div>
    <!-- <van-loading size="24px" vertical v-if="!classData">加载中...</van-loading> -->
    <van-empty image="search" description=""  v-if="empty"/>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <div class="listData" v-for="item in classData" :key="item.id">
        <div class="item" @click="goBook(item.id, item.title)">
          <div class="img">
            <img :src="item.cover" alt="" width="100%" height="100%" />
          </div>
          <div class="txt">
            <div class="title">{{ item.text }}</div>
            <div class="name">{{ item.author }}</div>
            <div class="context">1999万人阅读 | 已完结</div>
            <div class="van-multi-ellipsis--l2 p">
              {{ item.d }}
            </div>
          </div>
        </div>
      </div>
    </van-list>
  </div>
</template>

<script>
import { getSearchList } from "../api/searchData";
export default {
  data() {
    return {
      value: "",
      hotList: null,
      classData: null,
      loading: false,
      finished: false,
      empty:false
    };
  },
  methods: {
    onSearch() {
      this.getData();
      this.finished = false;
      console.log(this.value);
       this.$store.commit("searchHistory", this.value);
       this.empty=false
    },
    goBook(id, name) {
      console.log(id, name);
      this.$router.push({
        path: "/bookDetails",
        query: { id: id, name: name },
      });
    },
    getCatalog() {
      //发起请求 获取所有的数据！
      this.refreshing = false;
      getSearchList({
        search: this.value,
      }).then((data) => {
        let index = this.classData.length;
        // this.classData.push(...data.list.splice(index,1))
        this.classData = [
          ...this.classData,
          ...data.words.w.splice(index, 5),
        ];
        console.log(this.classData);
        this.loading = false;
        if (this.classData.length == data.words.w.length) {
          this.finished = true;
        }
      });
    },
    //滚动加载时触发，list组件定义的方法
    onLoad() {
      console.log("到底啦");
      this.getCatalog();
    },
    getData() {
        let value=this.value;
        this.classData=null
      getSearchList({
        search: value,
      }).then((data) => {
        console.log(data.words);
        if(data.words){
          this.classData = data.words.w.splice(0, 8);
        }else{
          console.log('object');
          this.empty=true;
          this.finished = true;
        }
      });
    },
  },
  created() {
    this.value = this.$route.query.keywords;
    this.getData();
  },
};
</script>

<style lang="less">
.search {
  .heads {
    width: 100%;
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    color: #fff;
    background-color: #333;
    height: 44px;
    line-height: 44px;
    .fh {
      padding-left: 10px;
    }
    .shuJ {
      padding-right: 10px;
    }
  }

  .listData {
    .item {
      padding: 15px;
      display: flex;
      border-bottom: #dcdcdc solid 1px;
      .img {
        width: 64px;
        height: 88px;
        margin-right: 10px;
        background-color: pink;
        flex-shrink: 0;
      }
      .txt {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .title {
          font-size: 16px;
          color: #1d2c33;
        }
        .name,
        .context,
        .p {
          font-size: 12px;
          color: #aaa;
        }
      }
    }
  }
}
</style>